/**
 * Created by Hwa on 2017/11/17.
 */
import React from 'react'
import './style.scss'
import SearchIcon from './search_icon.png'
import classNames from 'classnames'
import PropTypes from 'prop-types';

const SearchDiv = (props)=>{
  const{className,height,width,inputChange,changeIsFocus,buttonFocus,buttonClick} = props;
  return(
    <div className={classNames('search-div-wrapper',className)} height={height} width={width}>
      <input className={'search-input'} type={'text'} onChange={(e) => {
        inputChange(e.target.value)
      }} onFocus={() => changeIsFocus ? changeIsFocus(true):{}} onBlur={() => changeIsFocus? changeIsFocus(false):{}}/>
      <button className={'search-button'}
              onClick={(e)=>buttonClick(e)}
      >
        <img className={'search-icon'} src={SearchIcon}/>
      </button>
    </div>);
}

SearchDiv.propTypes = {
  inputChange: PropTypes.func.isRequired,
  buttonClick: PropTypes.func.isRequired
};

export default SearchDiv;
